<template>
<el-dialog  :visible.sync="showEditMenu" @input="updateVisible" >
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="菜单标题">
    <el-input v-model="form.btName"></el-input>
  </el-form-item>
   <el-form-item label="菜单等级">
    <el-radio v-model="form.menuMainType" label="1" border>一级菜单</el-radio>
    <el-radio v-model="form.menuMainType" label="2" @change="changeRadio" border>二级菜单</el-radio>
  </el-form-item>

   <div v-if='form.menuMainType==="2"'>
   <el-form-item label="一级菜单">
      <el-select v-model="form.type"  @change="changeMenuType" placeholder="请选择一级菜单">
    <el-option
      v-for="item in menutypes"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item >
    <el-form-item v-if="menuTypeShow.menuKeyShow" label="key">
    <el-input v-model="form.btKey"></el-input>
    </el-form-item>
  </div>
  <div >
   <el-form-item label="菜单类型">
      <el-select v-model="form.type"  @change="changeMenuType" placeholder="请选择菜单的响应动作类型">
    <el-option
      v-for="item in menutypes"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item >
    <el-form-item v-if="menuTypeShow.menuKeyShow" label="key">
    <el-input v-model="form.btKey"></el-input>
  </el-form-item>
   <el-form-item v-if="menuTypeShow.menuViewShow || menuTypeShow.mpShow" label="url">
    <el-input v-model="form.url"></el-input>
  </el-form-item>
  </el-form-item>
   <el-form-item v-if="menuTypeShow.mpShow" label="appid">
    <el-input v-model="form.appid"></el-input>
  </el-form-item>
  </el-form-item>
   <el-form-item v-if="menuTypeShow.mpShow" label="pagepath">
    <el-input v-model="form.pagepath"></el-input>
  </el-form-item>
  </div>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="showEditMenu = false">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
</template>
<script>
import request from "@/utils/request";
  export default {
       props: {
    value: Boolean,
    // paperId: String
  },
    data() {
      return {
        menuMainType:'1',
        form: {
          menuMainType:'1',
          appId: '',
          btKey: '',
          mediaId: '',
          btName: '',
          pagePath: '',
          subButtons: [],
          url: '',
          type: ''
        },
        menutypes:[
          {label:"网页类型" ,
          value: 'view'},
           {label:"点击类型" ,
          value: 'click'},
           {label:"小程序类型" ,
          value: 'miniprogram'},
        ],
        menuTypeShow:{
          menuKeyShow:false,
         menuViewShow:false,
         mpShow:false
        }
       
      }
    },
    created(){
  this.form.appId = sessionStorage.getItem("currentApp")
    },
    methods: {
      changeRadio(val){
          if(val && val == '2'){
            request({
            url: "/admin/menu/put",
            method: "post",
            data: this.form
          }).then(res => {

          })
          }
      },
        updateVisible(event) {
      this.$emit('input', event);
    },
      onSubmit() {
        console.log('submit!');
      
        request({
        url: "/admin/menu/put",
        method: "post",
        data: this.form
      }).then(res => {
        console.log(res);
        this.showEditMenu=false;
        this.$emit("on-select", "success");
      });

      },

initMenuShow(){
this.menuTypeShow={
  menuViewShow:false,
  menuKeyShow:false,
  mpShow:false
}
},
      changeMenuType(val){
        this.initMenuShow();
        if(val==="view"){
          this.menuTypeShow.menuViewShow =true;
        }else if(val ==="click"){
          this.menuTypeShow.menuKeyShow=true;
        }else if(val ==="miniprogram"){
        this.menuTypeShow.mpShow =true;
        }
      }
    },
    computed: {
    showEditMenu: {
      get: function() {
        return this.value;
      },
      set: function(val) {
        this.$emit('input', val);
      }
    },

  },
  }
</script>